<template>
    <div class="layout-root">

        <!-- 主页面 -->
        <myView class="view"></myView>

        <!-- 底部栏 -->
        <myTab class="tab"></myTab>

    </div>
</template>

<script setup>
import myView from './home/index.vue'
import myTab from './layout/tab/index.vue'


//#endregion

</script>

<style scoped lang="scss">
.layout-root {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr 50px;

    .view {
        grid-row: 1;
        width: 100%;
        height: calc(100% - var(--status-bar-height));
        overflow-y: auto;
        padding-top: var(--status-bar-height);
    }

    .tab {
        grid-row: 2;
        width: 100%;
        height: 100%;
    }

}
</style>